<template>
  <div class="aspp-container">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item label="" prop="">
          <el-input v-model="queryParams.query" placeholder="会员姓名/手机号" clearable style="width: 300px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="num_detail">
      <div class="num_detail_box">活动数据：</div>
      <div class="num_detail_box">订单金额：￥{{info.orderMoney}}</div>
      <div class="num_detail_box">订单笔数：{{info.orderCount}}</div>
      <div class="num_detail_box">奖池金额：￥{{info.jackpotMoney}}</div>
      <div class="num_detail_box">退款笔数：{{info.refundOrderCount}}</div>
      <div class="num_detail_box">退款金额：￥{{info.refundMoney}}</div>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <div class="listBox_head_l">
          <el-button type="primary" size="small" @click="addRankingRewards">添加排行奖励</el-button>
          <el-button type="primary" size="small" @click="addRandomRewards">添加随机奖励</el-button>
          <el-button type="primary" size="small" @click="addAppointRewards">添加指定奖励</el-button>
        </div>
        <el-button type="primary" size="small" @click="confirmLottery">确认开奖</el-button>
      </div>
      <el-table v-loading="loading" :data="tabList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="奖励类型" align="center" prop="awardType" :show-overflow-tooltip="true" width="120px">
          <template slot-scope="scope">
            <dict-tag :options="awardRecordTypeLs" :value="scope.row.awardType" />
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" prop="orderId" width="120" />
        <el-table-column label="会员姓名" align="center" prop="name"></el-table-column>
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="购买排名" align="center" prop="buyRank" />
        <el-table-column label="核销排名" align="center" prop="verificationRank" />
        <el-table-column label="综合排行" align="center" prop="comprehensiveRank" />
        <el-table-column label="排序" align="center" prop="" width="155">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEdite">{{scope.row.sort}}</span>
            <el-input v-if="scope.row.isEdite" v-model="scope.row.sort" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="奖励" align="center" prop="" width="155">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;" v-if="!scope.row.isEdite">{{scope.row.awardAmount}}
              <dict-tag :options="jackpotAssetTypeLs" :value="scope.row.awardAssetType" />
              <span v-if="scope.row.isVirtual==1">（虚拟）</span>
            </div>
            <el-input v-if="scope.row.isEdite" v-model="scope.row.awardAmount" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editView(scope)" v-if="!scope.row.isEdite">修改</el-button>
            <el-button size="mini" type="text" @click="sumitView(scope)" v-if="scope.row.isEdite">保存</el-button>
            <el-button size="mini" type="text" @click="deleteView(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <DalogOne :id="dialogId" :awardAssetType="info.awardAssetType" v-bind="$attrs" v-if="dialogVisible"
      :visible.sync="dialogVisible" @success="_handleSuccess">
    </DalogOne>
    <DalogTwo :id="dialogId" :awardAssetType="info.awardAssetType" v-bind="$attrs" v-if="dialogVisibleTwo"
      :visible.sync="dialogVisibleTwo" @success="_handleSuccess">
    </DalogTwo>
    <DalogThree :id="dialogId" :awardAssetType="info.awardAssetType" v-bind="$attrs" v-if="dialogVisibleThree"
      :visible.sync="dialogVisibleThree" @success="_handleSuccess">
    </DalogThree>
    <DalogFour :id="dialogId" :awardAssetType="info.awardAssetType" v-bind="$attrs" v-if="dialogVisibleFour"
      :visible.sync="dialogVisibleFour" @success="_handleSuccess">
    </DalogFour>
  </div>
</template>

<script>
  import {
    jackpotAwardLs,
    jackpotStatistics,
    updateJackpotAwardAmount,
    deleteJackpotAward,
  } from "@/api/consumeMiningManagement/onlineClockingActivity";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import DalogOne from "@/views/consumeMiningManagement/jackpot/components/allocationManagement/dialogOne";
  import DalogTwo from "@/views/consumeMiningManagement/jackpot/components/allocationManagement/dialogTwo";
  import DalogThree from "@/views/consumeMiningManagement/jackpot/components/allocationManagement/dialogThree";
  import DalogFour from "@/views/consumeMiningManagement/jackpot/components/allocationManagement/dialogFour";
  export default {
    // dicts: ['equity_card_issue_type', 'equity_card_sell_status'],
    name: "",
    components: {
      ExportExcelButton,
      DalogOne,
      DalogTwo,
      DalogThree,
      DalogFour,
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 导出遮罩层
        exportLoading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        tabList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          punchActivityId: '', //打卡活动id
          query: '', //会员姓名/手机号
        },
        awardRecordTypeLs: [], //奖励类型数组
        info: {},
        dialogVisible: false, //添加排行奖励弹窗
        dialogVisibleTwo: false, //添加随机奖励弹窗
        dialogVisibleThree: false, //添加指定奖励弹窗
        dialogVisibleFour: false, //确认开奖弹窗
        checked: true,
        labelWidth: '100px',
        inputWidth: '260px',
        dialogId: '', //
        jackpotAssetTypeLs: [], //奖池奖励类型
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      let id = this.$route.query.id
      if (id != undefined) {
        this.queryParams.punchActivityId = id
      }
      this.getJackpotAssetType();
      this.getAwardRecordTypeLs();
      this.getJackpotStatistics();
      this.getList();
    },
    methods: {
      //获取奖池资产类型字典
      getJackpotAssetType() {
        var dictType = "shenye_punch_activity_jackpot_asset_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.jackpotAssetTypeLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      addRankingRewards() { //添加排行奖励
        this.dialogId = this.queryParams.punchActivityId
        this.dialogVisible = true
      },
      addRandomRewards() { //添加随机奖励
        this.dialogId = this.queryParams.punchActivityId
        this.dialogVisibleTwo = true
      },
      addAppointRewards() { //添加指定奖励
        this.dialogId = this.queryParams.punchActivityId
        this.dialogVisibleThree = true
      },
      confirmLottery() { //确认开奖
        this.dialogId = this.queryParams.punchActivityId
        this.dialogVisibleFour = true
      },
      editView(scope) { //编辑奖励操作
        let index = scope.$index
        this.$set(this.tabList, index, {
          ...this.tabList[index],
          isEdite: true
        })
      },
      sumitView(scope) { //保存奖励操作
        let index = scope.$index
        var params = {
          amount: scope.row.awardAmount, //奖励数量
          id: scope.row.id, //记录id
          sort: scope.row.sort, //排序号
        };
        updateJackpotAwardAmount(params).then((res) => {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.getList()
          this.$set(this.tabList, index, {
            ...this.tabList[index],
            isEdite: false
          })
        })
      },
      //获取奖励类型字典
      getAwardRecordTypeLs() {
        var dictType = "shenye_punch_jackpot_award_record_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.awardRecordTypeLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      // 查询活动数据
      getJackpotStatistics() {
        let data = {
          punchActivityId: this.queryParams.punchActivityId
        }
        jackpotStatistics(data).then(response => {
          this.info = response.result
        });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        jackpotAwardLs(this.queryParams).then(response => {
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.tabList.forEach(item => {
            item.isEdite = false
            return item
          })
          this.loading = false;
        });
      },
      // 表单重置
      resetQuery() {
        this.queryParams.pageNum = 1
        this.queryParams.query = ''
        this.getList();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      deleteView(row) { //删除
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteJackpotAward(row.id).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          })
        }).catch(() => {});
      },
      _handleSuccess(e) {
        //成功回调
        this.resetQuery()
        // this.getList()
      },
    }
  };

</script>
<style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    align-content: center;
    justify-content: space-between;
  }

  .listBox_head_l {
    display: flex;
    align-items: center;
  }

  .listBox_head_l_box {
    font-size: 15px;
    margin-left: 20px;
    color: #333;
  }

  .tips_icon {
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    color: #ff7418;
  }

  .num_detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
  }

  .num_detail_box {
    color: #333;
    font-size: 16px;
    margin-right: 30px;
  }

  .real_name_status {
    font-size: 15px;
  }

  .el-icon {
    font-size: 16px;
    color: #05ce69;
    margin: 0 4px 0;
  }

  .el-icon-no {
    font-size: 16px;
    color: #ee3110;
    margin: 0 4px 0;
  }

</style>
